import React, {Component} from 'react';
import PropTypes from "prop-types";
import {Table} from 'antd';

const columns = [
    {
        title: '标题',
        dataIndex: 'title'
    }, {
        title: '描述',
        dataIndex: 'desc'
    }, {
        title: "发布日期",
        dataIndex: "date"
    }
];

class ArticleTable extends Component {
    componentDidMount() {
        this.props.loadArticles();
    }
    render() {
        return (
            <div className="table">
            <div className="search">
                <input type="text" placeholder="请输入关键字" value={this.props.query} onChange={this.props.changeQuery}/>
                <button onClick={this.props.search}>搜索</button>
            </div>
            <Table columns={columns.map(
                    c => c.render
                    ? ({
                        ...c,
                        render: c.render.bind(this)
                    })
                    : c)} dataSource={this.props.articles} rowKey="id"/>
        </div>);
    }
};

export default ArticleTable;
